<template>
  <div>
    <h2>{{playlist.name}}</h2>
    <p>介绍：{{playlist.description}}</p>
    <img :src="playlist.coverImgUrl" alt="">
    <ul>
      <li v-for="item in tracks" :key="item.id" @click="goPlay(item.id)">
        <b>{{item.name}}</b>
        --
        <span v-for="ar in item.ar" :key="ar.id">{{ar.name}}，</span>
      </li>
    </ul>
  </div>
</template>

<script>
import {
  getPlaylistDetailUrlAction
} from '../../service/api'

export default {
  data () {
    return {
      playlist: {},
      tracks: []
    }
  },
  methods: {
    goPlay (id) {
      this.$router.push({
        path: '/player',
        query: { id }
      })
    }
  },
  async created () {
    // 获取歌单详情
    try {
      const res = await getPlaylistDetailUrlAction(this.$route.query.id)
      this.playlist = res.playlist
      this.tracks = res.playlist.tracks
    } catch (err) {
    }
  },
  destroyed () {
    console.log('歌单组件销毁了')
  }
}
</script>

<style lang="scss" scoped>
li {
  line-height: 40px;
  b {
    color: red;
  }
}
</style>
